<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登录</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="js/jquery.serializejson.js"></script>


    <style>
        body{
            padding-top: 45px !important;
            /*padding-bottom: 70px;*/
        }
        .jumbotron{
            background: url("img/reg_bg_min.jpg");
            background-size: cover;
        }
        .jumbotron h1,.jumbotron h2{
            color: snow;
        }
        .jumbotron strong{
            color: #bcccc2;
        }
        .jumbotron h2 small{
            color: rgba(210, 218, 225, 0.83);
        }
        /*.fa-chevron-right:before {*/
        /*    content: "";*/
        /*}*/
    </style>
    <link rel="stylesheet" href="css/login.css">

    <script>
        $(function () {
            function checkUsername() {
                //1.获取用户名值
                var username = $("#lg_username").val();
                //2.定义正则
                var reg_username = /^\w{8,20}$/;

                //3.判断，给出提示信息
                var flag = reg_username.test(username);
                if(flag){
                    //用户名合法
                    $("#lg_username").css("border","");
                    $('#error_username').text("");
                }else{
                    //用户名非法,加一个红色边框
                    $("#lg_username").css("border","1px solid red");
                    $('#error_username').css({"color":"red"}).html("用户名格式错误");
                    // $('#error_username').parent().css({"width":"70px"})
                }

                return flag;
            }
            function checkPassword() {
                //1.获取用户名值
                var password = $("#lg_password").val();
                //2.定义正则
                var reg_password = /^\w{8,20}$/;

                //3.判断，给出提示信息
                var flag = reg_password.test(password);
                if(flag){
                    //用户名合法
                    $("#lg_password").css("border","");
                    $('#error_password').text("");
                }else{
                    //用户名非法,加一个红色边框
                    $("#lg_password").css("border","1px solid red");
                    $('#error_password').css({"color":"red"}).html("格式错误");
                    // $('#error_password').parent().css({"width":"70px"})
                }

                return flag;
            }

            $('#tbutton').click(function () {
                if (checkUsername()&&checkUsername()) {
                    $('#errorMsg').css({"color":"red"}).html('<p>登陆中……</p>');
                    $.ajax({
                        url: "/login",
                        type: "post",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify($('#login-form').serializeJSON()),
                        success: function (data) {
                            console.log(data);
                            if(data.flag==false){
                                $('#errorMsg').css({"background":"blue","color":"red"}).html(data.errorMsg);
                            }else {
                                $('#errorMsg').css({"background":"","color":"blue"}).html("登录成功");
                            }
                        }
                    })
                }
            });
            $('#lg_username').blur(checkUsername);
            $('#lg_password').blur(checkPassword);
        })
    </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="img/1168148.png" height="30px">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li ><a href="#">当前作物信息</a></li>
                <li><a href="#">视频直播</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">历史信息<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">历史环境信息总表</a></li>
                        <li><a href="#">历史空气温湿度表</a></li>
                        <li><a href="#">历史土壤湿度表</a></li>
                        <li><a href="#">历史光照强度表</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">历史操作记录</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">历史提醒记录</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="快速检索">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://106.14.162.154:82/">控制台</a></li>
                <li><a href="#">设置</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">详细信息</a></li>
                        <li><a href="#">成员管理</a></li>
                        <li><a href=regist.html>注册</a></li>
                        <li><a href=login.html>登录</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">登出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="jumbotron">
        <h1>节能减排小组DEMO</h1>
        <p><strong>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
            content or information.</strong></p>
        <h2>用科技 <small>让世界更简单</small></h2>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>
<div class="text-center" style="padding:50px 0">
    <div class="logo">login</div>
    <!-- Main Form -->
    <div class="login-form-1">
        <form id="login-form" class="text-left">
            <div id="errorMsg"></div>
            <div class="login-form-main-message"></div>
            <div class="main-login-form">
                <div class="login-group">
                    <div class="form-group">
                        <label for="lg_username" class="sr-only">Username</label>
                        <input type="text" class="form-control" id="lg_username" name="username" placeholder="username">
                        <p id="error_username"></p>
                    </div>
                    <div class="form-group">
                        <label for="lg_password" class="sr-only">Password</label>
                        <input type="password" class="form-control" id="lg_password" name="password" placeholder="password">
                        <p id="error_password"></p>
                    </div>
                    <div class="form-group login-group-checkbox">
                        <input type="checkbox" id="lg_remember" name="lg_remember">
                        <label for="lg_remember">remember</label>
                    </div>
                </div>
                <input  class="login-button" id="tbutton" type="button" value=" 》"></input>
            </div>
            <div class="etc-login-form">
                <p>forgot your password? <a href="#">click here</a></p>
                <p>new user? <a href="#">create new account</a></p>
            </div>
        </form>
    </div>
    <!-- end:Main Form -->
</div></body>
</html>